<!-- 基础表单 -->
<page-header [title]="'基础表单'">
  将一个冗长或用户不熟悉的表单任务分成多个步骤，指导用户完成。
</page-header>
<nz-card [nzBordered]="false">
  <form nz-form [formGroup]="form" (ngSubmit)="submit()" se-container="1" labelWidth="200">
    <se label="{{ 'title' | translate }}" error="{{ 'placeholder' | translate }}{{ 'title' | translate }}" required>
      <!-- 给目标起个名字 -->
      <input nz-input formControlName="title" placeholder="{{ 'give.target.name' | translate }}" />
    </se>
    <!-- 起止日期 -->
    <se
      label="{{ 'commencement.date' | translate }}"
      error="{{ 'select.please.choose' | translate }}{{ 'commencement.date' | translate }}"
      required
    >
      <nz-range-picker formControlName="date"></nz-range-picker>
    </se>
    <!-- 目标描述 -->
    <se
      label="{{ 'objective.desc' | translate }}"
      error="{{ 'placeholder' | translate }}{{ 'objective.desc' | translate }}"
      required
    >
      <!-- 请输入你的阶段性工作目标 -->
      <textarea
        nz-input
        formControlName="goal"
        [nzAutosize]="{ minRows: 4 }"
        placeholder="{{ 'placeholder' | translate }}{{ 'your.milestones' | translate }}"
      ></textarea>
    </se>
    <!--衡量标准  -->
    <se
      label="{{ 'standard.measurement' | translate }}"
      error="{{ 'placeholder' | translate }}{{ 'standard.measurement' | translate }}"
      required
    >
      <textarea
        nz-input
        formControlName="standard"
        [nzAutosize]="{ minRows: 4 }"
        placeholder="{{ 'placeholder' | translate }}{{ 'standard.measurement' | translate }}"
      ></textarea>
    </se>
    <!-- 客户 目标的服务对象 衡量标准-->
    <se
      label="{{ 'customer' | translate }}"
      optionalHelp="{{ 'target.service.object' | translate }}"
      error="{{ 'placeholder' | translate }}{{ 'standard.measurement' | translate }}"
    >
      <input nz-input formControlName="client" placeholder="请描述你服务的客户，内部客户直接 @姓名／工号" />
    </se>
    <!-- 邀评人 -->
    <se label="{{ 'reviewers' | translate }}">
      <input nz-input formControlName="invites" placeholder="请直接 @姓名／工号，最多可邀请 5 人" />
    </se>
    <!-- 权重 -->
    <se label="{{ 'milestone.schedule' | translate }}">
      <nz-input-number formControlName="weight" placeholder="{{ 'placeholder' | translate }}"></nz-input-number>
      <em>%</em>
    </se>
    <!-- 目标公开  客户、邀评人默认被分享-->
    <se
      label="{{ 'target.public' | translate }}"
      extra="{{ 'customer' | translate }}、{{ 'invited.reviewers.shared.default' | translate }}"
    >
      <nz-radio-group formControlName="public">
        <!-- 公开 -->
        <label nz-radio [nzValue]="1">{{ 'public' | translate }}</label>
        <!-- 部分公开 -->
        <label nz-radio [nzValue]="2">{{ 'part.public' | translate }}</label>
        <!-- 不公开 -->
        <label nz-radio [nzValue]="3">{{ 'do.not.public' | translate }}</label>
      </nz-radio-group>
      <input *ngIf="form.value.public === 2" nz-input formControlName="publicUsers" placeholder="公开给" />
    </se>
    <se>
      <!-- 提交 -->
      <button nz-button nzType="primary" [disabled]="form.invalid" type="submit" [nzLoading]="submitting">
        {{ 'submit' | translate }}
      </button>
      <!-- 保存 -->
      <button nz-button class="ml-sm">{{ 'button.save' | translate }}</button>
    </se>
  </form>
</nz-card>
